@import './theme.scss';

.tags-view-container {
  height: $tabContainerHeight;
  width: 100%;
  background: #fff;
  position: absolute;
  border-bottom: 1px solid #d8dce5;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);

  .tags-view-wrapper {
    height: 100%;

    & .el-scrollbar__wrap {
      height: 100%;
      overflow: hidden;
    }

    .tags-view-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      border: 1px solid #d8dce5;
      color: $tabText;
      background: $tabBg;
      height: $tabContainerHeight * 0.75;
      line-height: $tabContainerHeight * 0.75;
      font-size: $tabFontSize;
      padding: 0 $tabContainerHeight * 0.2;
      margin-left: $tabContainerHeight*0.2;
      margin-top: $tabContainerHeight*0.1;

      &:first-of-type {
        // margin-left:0.5rem;
      }

      &:last-of-type {
        // margin-right: calc($tabContainerHeight*0.2+0px);
      }

      &.active {
        background-color: $tabBgActive;
        color: $tabTextActive;
        border-color: $tabBgActive;

        &::before {
          content: "";
          background: $tabCircleActive;
          display: inline-block;
          width: $tabCircleWh;
          height: $tabCircleWh;
          border-radius: 50%;
          position: relative;
          margin-right: 2px;
        }
      }
    }
  }

  .contextmenu {
    margin: 0;
    background: #fff;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

    li {
      margin: 0;
      padding: 7px 16px;
      cursor: pointer;

      &:hover {
        background: #eee;
      }
    }
  }
}

.tags-view-wrapper {
  .tags-view-item {
    .el-icon-close {
      width: $iconCloseWh;
      height: $iconCloseWh;
      vertical-align: 2px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;

      &:before {
        transform: scale(0.6);
        display: inline-block;
      }

      &:hover {
        background-color: $iconCloseHoverBg;
        color: $iconCloseHoverColor;
      }
    }
  }
}